<template>
  <div v-loading="tabLoading">
    <el-button type="primary" class="fr" @click="tab4CreateItem" v-permission="'materialInfo.add'">创建</el-button>
    <div class="filter-container">
      <el-select v-model="tab4QueryParams.custom_id" class="filter-item" filterable remote
        :remote-method="customGetlist" placeholder="请选择客户" clearable>
        <el-option v-for="i in tab4CustomOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="tab4QueryParams.group_id" filterable class="filter-item" placeholder="请选择工序" clearable>
        <el-option v-for="i in tab4GroupOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-button class="filter-item" type="success" plain @click="tab4Research">查询</el-button>
    </div>
    <z-table :list="tab4List" :tableProps="tab4TableProps" @row-click="mainRowClick" :columns="tab4Columns"
      @editItem="tab4EditItem" @deleteItem="tab4DeleteItem"></z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="tab4QueryParams.page"
      :limit.sync="tab4QueryParams.size" @change="paginationschane"></z-pagination>
    <z-form-dialog :name="''" :data="tab4Data" :formProps="tab4FormProps" :fields="tab4Fields" @submit="tab4Submit"
      :submitLoading="submitLoading" :visible.sync="tab4EditFormVisible"></z-form-dialog>
    <!-- 弹框 -->
    <el-dialog :title="'规则明细'" :width="formProps.dialogWidth" :close-on-click-modal="false"
      :visible.sync="roleDetailed">
      <div>
        <!-- <el-button style="margin-bottom: 10px" type="primary" class="fl" size="mini" @click="createItem2">
          添加规则明细</el-button> -->
        <!-- <el-button v-if="sortFlag" :loading="sortLoading" style="margin-bottom: 10px" type="success" class="fl"
          size="mini" @click="saveSort">
          保存排序</el-button>
        <el-tag class="ml-10" v-else type="info">提示：拖动表格行可进行排序</el-tag> -->
        <z-table ref="dragTable" v-loading="detailPageLoading" :list="list2" :tableProps="tableProps2"
          :columns="columns2">
        </z-table>

        <div class="text-right" style="margin-top:30px">
          <el-button @click="roleDetailed = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: '',
  components: {},
  props: {},
  data() {
    return {
      roleDetailed: false,
      detailPageLoading: false,
      list2: [],
      tableProps2: {
        border: true,
        opsColWith: 80,
        // fixed: false,
        // highlightCurrentRow: false,
        hideOperations: true,
      },
      columns2: [
        { title: '区段序号', key: 'sequence', width: 72 },
        { title: '区段类型', key: 'coding_type', width: 100 },
        { title: '要素代码', key: 'coding_param', width: 100 },
        { title: '要素名称', key: 'coding_desc' },
        { title: '值', key: 'field_value', width: 100 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      // 往上是规则明细
      tabLoading: false,
      submitLoading: false,
      tab4QueryParams: {
        page: 1,
        size: 10,
        cust_id: null,
        group_id: null,
      },
      total: 0,
      tab4CustomOptions: [],
      tab4GroupOptions: [],
      tab4List: [],
      tab4TableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: true,
        highlightCurrentRow: true,
      },
      tab4Columns: [
        { title: '客户编码', key: 'cust_code', width: 120 },
        { title: '客户名称', key: 'cust_name', width: 140 },
        { title: '工序名称', key: 'group_name', width: 140 },
        { title: '条码规则编号', key: 'barcode_rule_no', width: 120 },
        { title: '条码规则名称', key: 'rule_name', width: 140 },
        { title: '条码规则描述', key: 'rule_description' },
        { title: '条码层级', key: 'barcode_level', width: 90 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      tab4Data: {},
      tab4FormProps: {
        dialogWidth: '70%',
        labelWidth: '140px',
      },
      tab4Fields: [
        {
          title: '客户',
          key: 'cust_id',
          name: 'select',
          span: 8,
          options: [],
          tips: '如果不选，则适用于所有客户',
          props: { clearable: true },
        },
        { title: '条码规则', key: 'barcode_rule_id', name: 'select', span: 16, options: [] },
        {
          title: '条码层级',
          key: 'barcode_level',
          span: 8,
          name: 'select',
          options: [
            { label: '盒标', value: 1 },
            { label: '箱标', value: 2 },
            { label: '栈板', value: 3 },
          ],
        },
        {
          title: '工序',
          key: 'group_id',
          name: 'select',
          span: 16,
          options: [],
          tips: '如果不选，则不限制可使用的工序',
          props: {
            clearable: true,
          },
        },
        { title: '备注', key: 'remarks', span: 24, name: 'textarea' },
      ],
      tab4EditFormVisible: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 点击表格
    mainRowClick(row) {
      this.detailPageLoading = true
      this.$request(this.$api.barcodeRule + 'detailgetlist', {
        rule_id: row.barcode_rule_id,
        size: 999,
        page: 1,
      })
        .then((r) => {
          this.roleDetailed = true
          this.detailPageLoading = false
          this.list2 = r.list
        })
        .catch((e) => {
          this.detailPageLoading = false
        })
    },

    // 获取客户
    customGetlist(val) {
      this.$request(this.$api.custom + 'getlist', { page: 1, size: 10, queryString: val ? val : '' }).then((r) => {
        this.tab4CustomOptions = r.list.map((i) => ({
          label: `${i.cust_code} ${i.cust_name}`,
          value: i.id,
        }))
        this.$parent.$parent.$parent.setArrayProps(this.tab4Fields, [
          {
            key: 'cust_id',
            options: this.tab4CustomOptions,
          },
        ])
      })
    },
    // 获取工序
    getlistbypage(val) {
      this.$request(this.$api.group + 'getlistbypage', { page: 1, size: 100, queryString: val ? val : '' }).then(
        (r) => {
          this.tab4GroupOptions = r.list.map((i) => ({
            label: `${i.group_name}`,
            value: i.id,
          }))
          this.$parent.$parent.$parent.setArrayProps(this.tab4Fields, [
            {
              key: 'group_id',
              options: this.tab4GroupOptions,
            },
          ])
        },
      )
    },
    tab4Init() {
      this.customGetlist()
      this.getlistbypage()

      this.$request(this.$api.barcodeRule + 'getlist', { page: 1, size: 10 }).then((r) => {
        let tmp = r.list.map((i) => ({
          label: `${i.barcode_rule_no}  ${i.rule_name}  ${i.rule_description}`,
          value: i.id,
        }))
        this.$parent.$parent.$parent.setArrayProps(this.tab4Fields, [
          {
            key: 'barcode_rule_id',
            options: tmp,
          },
        ])
      })
      this.tab4Research()
    },
    tab4Research() {
      this.tab4GetList()
    },
    paginationschane(val) {
      this.tab4QueryParams.size = val.limit
      this.tab4QueryParams.page = val.page
      this.tab4GetList()
    },
    tab4GetList() {
      if (!this.$parent.$parent.$parent.data.id) return
      this.tabLoading = true
      this.tab4QueryParams.sku_id = this.$parent.$parent.$parent.data.id
      this.$request(this.$api.material + 'barcoderule/getlist', this.tab4QueryParams)
        .then((r) => {
          this.tabLoading = false
          this.tab4List = r.list
          this.total = r.total
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    tab4CreateItem() {
      this.tab4Data = { sku_id: this.$parent.$parent.$parent.data.id }
      this.tab4EditFormVisible = true
    },
    tab4EditItem(v) {
      this.tab4Data = {}
      this.$parent.$parent.$parent.pageLoading = true
      this.$request(this.$api.material + 'barcoderule/getbyid', {
        id: v.id,
      })
        .then((r) => {
          this.$parent.$parent.$parent.pageLoading = false
          this.tab4Data = r
          this.tab4EditFormVisible = true
        })
        .catch(() => {
          this.$parent.$parent.$parent.pageLoading = false
        })
    },
    tab4DeleteItem(v) {
      this.$confirm('确定要删除这条记录？', '操作确认').then(() => {
        this.$parent.$parent.$parent.pageLoading = true
        this.$request(this.$api.material + 'barcoderule/delete/' + v.id, {}, 'post')
          .then((r) => {
            this.$parent.$parent.$parent.pageLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.tab4GetList()
          })
          .catch(() => {
            this.$parent.$parent.$parent.pageLoading = false
          })
      })
    },
    tab4Submit() {
      this.submitLoading = true
      this.$request(this.$api.material + 'barcoderule/add', this.tab4Data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.tab4EditFormVisible = false
          this.tab4GetList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped></style>